<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <style>

        #all{
            width: 100%;
            height: 100%;
        }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">


        function active() {
            let code = $("#code").val();
            if (code.trim() === '') {
                alert("请填写授权码！");
                return false;
            }
            $.ajax({
                //几个参数需要注意一下
                type: "GET",//方法类型
                dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去
                /*
                dataType:
                    要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
                    xml：返回XML文档，可用JQuery处理。
                    html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
                    script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
                    json：返回JSON数据。
                    jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
                    text：返回纯文本字符串。
                */
                url: "http://localhost:8080/active",//url
                data: $('#myForm').serialize(),//这个是form表单中的id   jQuery的serialize()方法通过序列化表单值
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result === "success"){
                        location.reload();
                    } else {
                        alert(result);
                    }
                },
            });
        }
    </script>
</head>
<body>
<div id="all">

    <div id="form1" style="float:left;text-align:center;padding-top: 10px;padding-left: 10px;">
        <form id="myForm" action="/active" method="get">
            请输入授权码<input id="code" name="code" required="required"><br>
            <!--        请输入人数<input id="number" name="number" type="number" placeholder="仅支持正整数" required="required"><br><br>-->
            <input type="button" value="激活" onclick="active()">
            <!--        <input type="submit" class="btn" value="发送"/>-->
        </form>
    </div>

</div>
</body>
</html>
